<template>
	<view class="page">
		<view class="popup">
			<u-popup :show="show" mode="center" @close="close">
				<view>
					<u--form labelPosition="left" :model="queryParams" ref="form1">
						<u-form-item :label="$t('common.keyWord')" prop="queryParams.keyWord" borderBottom ref="item1">
							<u-input v-model="queryParams.keyWord">
								<template slot="suffix">
									<view @click.stop="search">
										<uni-icons type="search" size="30" color="#ccc"></uni-icons>
									</view>
								</template>
							</u-input>
						</u-form-item>
					</u--form>
					<view style="position: absolute;top: 3%;right: 1%;" @click="close">
						<u-icon name="close-circle" size="40" color="#e8e8e8"></u-icon>
					</view>
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="table">
							<uni-table :stripe="true" :emptyText="$t('common.noData')" ref="table" type="selection"
								@selection-change="selectionChange">
								<!-- 表头行 -->
								<uni-tr style="background: #E8E8E8;">
									<uni-th width="50px" align="center">{{ $t('pages.quality.no') }}</uni-th>
									<uni-th width="100px" align="center">{{ $t('pages.quality.productionNo') }}</uni-th>
									<uni-th width="100px" align="center">{{ $t('pages.quality.styleNo') }}</uni-th>
									<uni-th width="100px" align="center">{{ $t('pages.quality.styleName') }}</uni-th>
									<uni-th width="100px" align="center">{{ $t('pages.quality.customer') }}</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item, index) in tableList" :key="item.id" @click="clickTr(item)">
									<uni-td align="center">{{index + 1}}</uni-td>
									<uni-td align="center">{{item.billNo}}</uni-td>
									<uni-td align="center">{{item.styleNo}}</uni-td>
									<uni-td align="center">{{item.styleName}}</uni-td>
									<uni-td align="center">{{item.customerName}}</uni-td>

								</uni-tr>
							</uni-table>
							<!-- <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view> -->
							<view class="footer">
								<view class="handle">
									<!-- <u-button @click="backTo">{{ $t('common.return') }}</u-button> -->
									<u-button type="primary" @click="confirmHadle">{{ $t('common.determine') }}</u-button>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import {
		getStyleList
	} from '@/api/quality.js'
	import request from '@/config/request.js';
	export default {
		// props: {
		// 	show: {
		// 		type: [String, Number, Boolean],
		// 		default: false
		// 	}
		// },
		data() {
			return {
				rowInfo: '',
				baseApi: '',
				selectData: '',
				selectedIndexs: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				show: false,
				queryParams: {
					keyWord: '',
					sewingId: '',
					limit: 99999,
					changeStyle: '',
					notProductionId: ''
				},
				tableList: [],
			};
		},
		onShow() {},
		mounted() {
			// this.getStyleInfo()
		},
		methods: {
			clickTr(item) {
				this.rowInfo = item
				console.log(this.rowInfo, 'this.rowInfo ')
			},
			search() {
				this.getStyleInfo()
			},
			// 获取款式信息
			getStyleInfo() {
				request.get(this.baseApi, this.queryParams).then(res => {
					if (res.code !== 0) return uni.$u.toast(res.msg)
					this.tableList = res.data.list
				})
			},
			close() {
				this.show = false
			},
			// open() {
			// 	this.show = true
			// },
			openDialog(sewingId, baseApi) {
				// this.open()
				this.selectedIndexs = []
				this.show = true
				this.queryParams.keyWord = ''
				this.queryParams.sewingId = sewingId
				this.baseApi = baseApi
				if (this.queryParams.sewingId) {
					this.getStyleInfo()
				}
			},
			backTo() {
				this.show = false
			},
			confirmHadle() {
				if (this.selectedIndexs.length === 1) {
					// this.selectedItems(this.selectedIndexs[0])
					this.$emit('selectStyle', this.rowInfo)
					this.show = false
				} else if (this.selectedIndexs.length === 0) {
					this.show = false
				} else {
					// #ifdef APP-PLUS
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('common.tips1')}</p>`, {
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					});
					return
					// #endif
					return uni.$u.toast(this.$t('common.tips1'))
				}
			},
			// selectedItems(i) {
			// 	this.selectData = this.tableList[i]
			// },
			// 多选
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-form {
		font-size: 1rem;
		margin-left: 2%;
	}

	.u-form-item {
		width: 40%;
	}

	/deep/ .u-form-item__body__left {
		width: 25% !important;
	}

	/deep/ .u-form-item__body__left__content__label {
		font-size: 1rem;
	}

	.popup {
		.scroll-Y {
			// height: 52%;
			height: 750.469rpx;
			padding-bottom: 65.666rpx;
			background-color: #fff;
		}

		/deep/ .u-popup__content {
			width: 60%;
			height: 60%;
		}

		/deep/ .u-input__content__field-wrapper__field {
			font-size: 1rem !important;
		}
	}

	.table {
		/deep/ .uni-table-th-content {
			font-size: 1rem;
		}

		.uni-table-td {
			font-size: 1rem;
		}

		/deep/ .u-tabs__wrapper__nav__item__text {
			font-size: 1.2rem;
		}
	}

	.footer {
		position: fixed;
		width: 60%;
		min-height: 10%;
		display: flex;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
		bottom: 10%;
		right: 20%;

		.handle {
			width: 20%;
			display: flex;
			justify-content: center;
			position: absolute;
			right: 2%;

			button {
				width: 225.141rpx;
				height: 82.552rpx;
				margin: 0 5%;
			}
		}
	}

	.position-img {
		position: absolute;
		left: 36%;
	}
</style>